<template>
    <div>
        <div id="container">
            <div id="header">
            </div>
            <div id="container">
                <div id="content2">

                    <el-button @click="dialogVisible = true">添加</el-button>
                    <!-- 添加页面 -->
                    <el-dialog title="编辑品牌" :visible.sync="dialogVisible" width="30%">
                        <el-form ref="form" :model="user" label-width="80px">
                            <el-form-item label="用户名称">
                                <el-input v-model="user.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="user.password"></el-input>
                            </el-form-item>
                            <el-form-item label="权限组">
                                <el-select v-model="user.gid" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="add()">提交</el-button>
                                <el-button @click="dialogVisible = false">取消</el-button>
                            </el-form-item>

                        </el-form>
                    </el-dialog>

                    <el-table :data="users" :row-class-name="tableRowClassName">
                        <el-table-column label="uid" prop="uid"></el-table-column>
                        <el-table-column label="gid" prop="gid"></el-table-column>
                        <el-table-column label="账户" prop="username"></el-table-column>
                        <el-table-column label="密码" prop="password"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-button type="danger" @click="deleteByIds(scope.row)">删除</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination :total="total" :page-size="usersPage.pageSize" :current-page="usersPage.currentPage"
                        layout="prev,pager,next,jumper,sizes,->,total" :page-sizes="[2, 3, 4, 5]"
                        @current-change="currentChange" @size-change="sizeChange"></el-pagination>



                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from '../../utils/Myaxios'

const options = {
    data() {
        return {
            user: {
                username: '',
                gid: '',
                password:''
            },
            dialogVisible: false,
            options: [
                {
                    value: '2',
                    label: '专家'
                },
                {
                    value: '3',
                    label: '单位'
                }
            ],
            total: 0,
            users: [],
            usersPage: {
                currentPage: 1,
                pageSize: 3
            }
        }
    },
    mounted() {
        this.get();
    },
    methods: {
        async get() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            const resp = await _axios.get('/users/all', {
                params: this.usersPage
            });
            this.users = resp.data.data.records,
            this.total = resp.data.data.total
            // console.log(resp)
        },
        sizeChange(size) {
            this.usersPage.pageSize = size,
            this.get()
        },
        currentChange(page) {
            this.usersPage.currentPage = page,
            this.get()
        },
        // eslint-disable-next-line no-unused-vars
        deleteByIds(row) {

        },
        // 每行颜色
        // eslint-disable-next-line no-unused-vars
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 0) {
                return 'warning-row'
            } else if (rowIndex === 2) {
                return 'success-row'
            }
            return ''
        },
        //   添加
        async add() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            let gid = this.options.value
            await _axios.post('/users/option',{},{
                params:{
                    username: this.user.username,
                    password: this.user.password,
                    gid: gid
                }
            })

        }
    }
}
export default options
</script>
<style>
@import '../../assets/static/andreasblue.css';

.el-table .warning-row {
    background: cornflowerblue
}

.el-table .success-row {
    background: gray
}
</style>